<!-- 此页面是管理员端——数据管理——1模板管理界面 -->
<template>
  <div class="container">
    <!--    标题-->
    <div slot="header" class="clearfix">
      <h3>模板列表</h3>
      <el-button
          class="float-right"
          @click="addTemplate(false,null)"
      >上传模板
      </el-button>
    </div>

    <!--    筛选区域-->
    <div class="search-form">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <!-- 毕业年份下拉框 -->
        <el-form-item label="专业">
          <el-select
              v-model="searchForm.major"
              clearable
              placeholder="请选择专业"
              style="width: 200px"
          >
            <el-option
                v-for="item in majorOptions"
                :key="item"
                :label="item"
                :value="item"
            />
          </el-select>
        </el-form-item>
        <!-- 学生学号+姓名下拉框 -->
        <el-form-item label="模板类型">
          <el-select
              v-model="searchForm.type"
              clearable
              placeholder="请选择模板类型"
              style="width: 200px"
          >
            <el-option
                v-for="item in typeOptions"
                :key="item"
                :label="item"
                :value="item"
            />
          </el-select>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item style="display: block;">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--    表格-->
    <el-table :data="templateList" class="table">
      <el-table-column prop="templateName" label="名称" width="90" />
      <el-table-column prop="majorName" label="专业" width="90" />
      <el-table-column prop="typeName" label="类型" width="90" />
      <el-table-column prop="createTime" label="上传时间" width="90" />
      <el-table-column prop="userName" label="上传用户" width="70" />
<!--      点击切换启用/禁用的按钮式开关-->
      <el-table-column label="启用状态" width="80" align="center">
        <template #default="scope">
          <el-switch
              v-model="scope.row.status"
              :loading="scope.row.loading"
              :disabled="scope.row.loading"
              active-value="1"
              inactive-value="0"
              active-text="启用"
              inactive-text="禁用"
              inline-prompt
              @change="(val) => handleStatusChange(scope.row, val)"
          />
        </template>
      </el-table-column>
      <!-- 操作列 -->
      <el-table-column label="操作" width="500" align="center">
        <template #default="scope">
          <!-- 修改基本信息 -->
          <el-button
              type="primary"
              size="small"
              @click="openEditInfoDialog(scope.row)"
          >
            修改基本信息
          </el-button>
          <!-- 修改评分参数 -->
          <el-button
              type="warning"
              size="small"
              @click="openEditParameterDialog(scope.row)"
          >
            修改评分参数
          </el-button>
          <!-- 修改权重 -->
          <el-button
              type="success"
              size="small"
              @click="openEditWeightDialog(scope.row)"
          >
            修改权重
          </el-button>
          <!-- 查看章节列表 -->
          <el-button
              type="info"
              size="small"
              @click="openChapterListDialog(scope.row)"
          >
            查看章节列表
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    分页-->
    <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        class="pagination"
    />

    <!--    弹窗部分-->
<!--    修改基本信息弹窗-->
    <el-dialog
        title="修改模板基本信息"
        v-model="editInfoDialogVisible"
        width="30%"
    >
      <el-form :model="editInfoForm">
        <el-form-item label="模板名称" label-width="100px">
          <el-input v-model="editInfoForm.templateName"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="editInfoDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEditInfoForm">保存</el-button>
      </template>
    </el-dialog>
<!--    修改评分参数弹窗-->
    <el-dialog
        title="修改评分参数"
        v-model="editParameterDialogVisible"
        width="40%"
    >
      <!-- 顶部信息 -->
      <div class="template-info">
        <p>
          <strong>模板名称：</strong>{{ editParameterForm.templateName }}
        </p>
        <p>
          <strong>所属专业：</strong>{{ editParameterForm.majorName }}
          &nbsp;&nbsp;&nbsp;
          <strong>所属类型：</strong>{{ editParameterForm.typeName }}
        </p>
      </div>
      <!-- 表单部分 -->
      <el-form :model="editParameterForm" label-width="120px">
        <el-form-item label="总字数">
          <el-input v-model="editParameterForm.contentCount" />
        </el-form-item>

        <el-form-item label="章节数">
          <el-input v-model="editParameterForm.passageCount" />
        </el-form-item>

        <el-form-item label="参考文献总数">
          <el-input v-model="editParameterForm.referCount" />
        </el-form-item>

        <el-form-item label="近五年文献占比">
          <el-input v-model="editParameterForm.fiveYear" />
        </el-form-item>

        <el-form-item label="近三年文献占比">
          <el-input v-model="editParameterForm.threeYear" />
        </el-form-item>

        <el-form-item label="英文引用数量">
          <el-input v-model="editParameterForm.englishRefer" />
        </el-form-item>
      </el-form>
<!--      按钮-->
      <template #footer>
        <el-button @click="editParameterDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEditParameterForm">保存</el-button>
      </template>
    </el-dialog>
<!--    修改权重详情弹窗-->
    <el-dialog
        v-model="editWeightDialogVisible"
        title="修改模板权重"
        width="50%"
    >
      <!-- 顶部信息 -->
      <div class="template-info">
        <p>
          <strong>模板名称：</strong>{{ editWeightForm.templateName }}
        </p>
        <p>
          <strong>所属专业：</strong>{{ editWeightForm.majorName }}
          &nbsp;&nbsp;&nbsp;
          <strong>所属类型：</strong>{{ editWeightForm.typeName }}
        </p>
      </div>
      <!-- 权重表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <!-- 一级指标 -->
        <el-table-column
            prop="firstFactorName"
            label="一级指标"
            width="150"
        >
          <template #default="{ row }">
            {{ row.firstFactorName }}：
            <el-input-number
                v-model="row.firstWeight"
                :min="0"
                :max="100"
                :step="1"
                size="small"
                style="margin-left: 5px"
            />
          </template>
        </el-table-column>

        <!-- 二级指标 -->
        <el-table-column label="二级指标">
          <template #default="{ row }">
            <div
                v-for="(second, idx) in row.secondGroup"
                :key="second.secondId"
                style="margin-bottom: 5px;"
            >
              {{ second.factorName }}：
              <el-input-number
                  v-model="second.weight"
                  :min="0"
                  :max="100"
                  :step="1"
                  size="small"
                  style="margin-left: 5px"
              />
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部按钮 -->
      <template #footer>
        <el-button @click="editWeightDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEditWeightForm">保存</el-button>
      </template>
    </el-dialog>
<!--    查看章节列表弹窗-->
    <el-dialog
        title="查看章节列表"
        v-model="chapterDialogVisible"
        width="40%"
    >
      <!-- 顶部信息 -->
      <div class="template-info">
        <p>
          <strong>模板名称：</strong>{{ chapterForm.templateName }}
        </p>
        <p>
          <strong>所属专业：</strong>{{ chapterForm.majorName }}
          &nbsp;&nbsp;&nbsp;
          <strong>所属类型：</strong>{{ chapterForm.typeName }}
        </p>
      </div>
      <!-- 表单部分 -->
      <el-form>
        <el-form-item>
          <el-table :data="chapterForm.chapters" style="width: 100%">
            <el-table-column prop="chapterOrder" label="章节顺序" width="200" />
            <el-table-column prop="chapterTitle" label="章节名称" />
          </el-table>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, onBeforeMount, computed, reactive} from 'vue';
import ElementPlus, {ElMessage, ElMessageBox} from 'element-plus';
import {
  getAllMajor,
  getAllTemplateType,
  getAllTemplatesByPages,
  updateTemplateStatusById,
  getTemplateOneById,
  updateTemplateNameById,
  getTemplateParameterById,
  updateTemplateParameterById, getTemplateChapterById, getTemplateWeightOneById, updateTemplateWeightOneById
} from "../../../api/facultyAdmin.js";

/*
  搜索与表单
 */
// 存放加载后的模板列表 loadTemplateList()
const templateList = ref([]);

// 分页数据
const currentPage = ref(1)
const total = ref(0)
const pageSize = ref(10)

// 搜索表单数据
const searchForm = ref({
  major: '',
  type: ''
});

// 下拉选项（接口动态获取）
const majorOptions = ref([]);
const typeOptions = ref([]);

// 页面加载时获取数据
onBeforeMount(async () => {
  // 加载模板列表
  await loadTemplateList();

  // 获取专业列表
  try {
    const majorRes = await getAllMajor()
    majorOptions.value = majorRes.data;
  } catch (e) {
    ElMessage.error("专业获取失败");
  }

  // 获取模板类型列表
  try {
    const typeRes = await getAllTemplateType()
    typeOptions.value = typeRes.data;
  } catch (e) {
    ElMessage.error("模板类型获取失败");
  }
})

// 加载模板列表信息
const loadTemplateList = async () => {
  try {
    const res = await getAllTemplatesByPages({
      currentPage: currentPage.value,
      pageSize: pageSize.value,
      facultyId: 1,
      major: searchForm.value.major || null,
      type: searchForm.value.type || null
    })
    templateList.value = res.data.records
    total.value = res.data.total
  } catch (e) {
    ElMessage.error("模板信息获取失败")
  }
}

// 页码改变处理
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
  loadTemplateList()
}

// 筛选部分搜索
const handleSearch = () => {
  currentPage.value = 1; // 重置为第一页
  loadTemplateList();
};

// 筛选部分重置
const resetSearch = () => {
  searchForm.value = {
    major: '',
    type: ''
  };
  currentPage.value = 1;
  loadTemplateList();
}

/*
  上传模板与启用状态
 */
// 上传模板addTemplate

// 修改启用状态
const handleStatusChange = async (row, newStatus) => {
  row.loading = true
  try {
    const res = await updateTemplateStatusById({
      templateId: row.templateId,
      status: newStatus
    })
    ElMessage.success(res.data || '操作成功')
  } catch (err) {
    console.error('接口调用异常:', err)
    if (err.code === 0) {
      ElMessage.error(err.msg || '操作失败')
    } else {
      ElMessage.error('网络错误，请稍后重试')
    }
    // 回滚状态
    row.status = newStatus === '1' ? '0' : '1'
  } finally {
    row.loading = false
    await loadTemplateList()
  }
}

/*
  修改基本信息按钮
 */
const editInfoDialogVisible = ref(false)  // 弹窗可见状态
const editInfoForm = ref({
  templateId: null,
  templateName: ''
})

// 点击按钮，打开弹窗并获取模板数据
const openEditInfoDialog = async (row) => {
  const res = await getTemplateOneById({ templateId: row.templateId })
  if(res.code === 1 && res.data) {
    editInfoForm.value.templateId = res.data.templateId
    editInfoForm.value.templateName = res.data.templateName
    editInfoDialogVisible.value = true
  } else {
    ElMessage.error(res.msg || '获取模板信息失败')
  }
}

// 提交修改
const submitEditInfoForm = async () => {
  if(!editInfoForm.value.templateName) {
    ElMessage.warning('模板名称不能为空')
    return
  }

  const res = await updateTemplateNameById({
    templateId: editInfoForm.value.templateId,
    templateName: editInfoForm.value.templateName
  })

  if(res.code === 1) {
    ElMessage.success('修改成功')
    editInfoDialogVisible.value = false
    await loadTemplateList()
  } else {
    ElMessage.error(res.msg || '修改失败')
  }
}

/*
  修改评分参数按钮
 */
const editParameterDialogVisible = ref(false)  // 弹窗可见状态
const editParameterForm = ref({
  templateId: null,
  templateName: '',
  majorName: '',
  typeName: '',
  contentCount: '',
  passageCount: '',
  referCount: '',
  fiveYear: '',
  threeYear: '',
  englishRefer: ''
})

// 点击按钮，打开弹窗并获取模板数据
const openEditParameterDialog = async (row) => {
  const res = await getTemplateParameterById({ templateId: row.templateId })
  if(res.code === 1 && res.data) {
    editParameterForm.value = res.data
    editParameterDialogVisible.value = true
  } else {
    ElMessage.error(res.msg || '获取评分参数信息失败')
  }
}

// 提交修改
const submitEditParameterForm = async () => {
  if(!editParameterForm.value.contentCount) {
    ElMessage.warning('内容不得为空')
    return
  }
  if(!editParameterForm.value.passageCount) {
    ElMessage.warning('内容不得为空')
    return
  }
  if(!editParameterForm.value.referCount) {
    ElMessage.warning('内容不得为空')
    return
  }
  if(!editParameterForm.value.fiveYear) {
    ElMessage.warning('内容不得为空')
    return
  }
  if(!editParameterForm.value.threeYear) {
    ElMessage.warning('内容不得为空')
    return
  }
  if(!editParameterForm.value.englishRefer) {
    ElMessage.warning('内容不得为空')
    return
  }

  const res = await updateTemplateParameterById({
    templateId: editParameterForm.value.templateId,
    contentCount: editParameterForm.value.contentCount,
    passageCount: editParameterForm.value.passageCount,
    referCount: editParameterForm.value.referCount,
    fiveYear: editParameterForm.value.fiveYear,
    threeYear: editParameterForm.value.threeYear,
    englishRefer: editParameterForm.value.englishRefer
  })

  if(res.code === 1) {
    ElMessage.success('修改成功')
    editParameterDialogVisible.value = false
    await loadTemplateList()
  } else {
    ElMessage.error(res.msg || '修改失败')
  }
}

/*
  修改权重按钮
 */
const editWeightDialogVisible = ref(false)  // 弹窗可见状态
const editWeightForm = reactive({
  templateId: null,
  templateName: '',
  majorName: '',
  typeName: '',
  weights: []
})

// 一级、二级分组规则
const firstLevelIds = [1, 4, 7, 10, 15];
const secondLevelGroups = [
  [2, 3],
  [5, 6],
  [8, 9],
  [11, 12, 13, 14],
  [16, 17]
]

// 计算属性：转成表格数据（显示分数）
const tableData = computed(() => {
  const data = []
  for (let i = 0; i < firstLevelIds.length; i++) {
    const firstId = firstLevelIds[i]
    const secondIds = secondLevelGroups[i]

    const firstWeight = editWeightForm.weights.find(w => w.factorId === firstId)
    const rowGroup = secondIds.map(secondId => {
      const secondWeight = editWeightForm.weights.find(w => w.factorId === secondId)
      return {
        secondId,
        factorName: secondWeight?.factorName || '',
        weight: Math.round((secondWeight?.weight || 0) * 100)
      }
    })

    data.push({
      firstId,
      firstFactorName: firstWeight?.factorName || '',
      firstWeight: Math.round((firstWeight?.weight || 0) * 100),
      secondGroup: rowGroup
    })
  }
  return data
})

// 点击按钮，打开弹窗并获取模板权重信息
const openEditWeightDialog = async (row) => {
  try {
    const res = await getTemplateWeightOneById({ templateId: row.templateId })
    if (res.code === 1 && res.data) {
      editWeightForm.templateId = res.data.templateId
      editWeightForm.templateName = res.data.templateName
      editWeightForm.majorName = res.data.majorName
      editWeightForm.typeName = res.data.typeName
      editWeightForm.weights = res.data.weights

    } else {
      ElMessage.error(res.msg || '获取模板权重信息失败')
    }
    editWeightDialogVisible.value = true
  } catch (e) {
    ElMessage.info('该模板无权重数据')
  }
}

// 提交修改
const submitEditWeightForm = async () => {
  // ========== 校验一级指标总和 ==========
  const totalFirst = tableData.value.reduce((sum, row) => sum + row.firstWeight, 0)
  if (totalFirst !== 100) {
    ElMessage.error('五个一级指标的权重和必须等于100')
    return
  }

  // ========== 校验每组二级指标 ==========
  for (const row of tableData.value) {
    const secondSum = row.secondGroup.reduce((sum, s) => sum + s.weight, 0)
    if (secondSum !== 100) {
      ElMessage.error(`【${row.firstFactorName}】下的二级指标权重和必须等于100`)
      return
    }
  }

  // ========== 校验通过，构造提交数据 ==========
  const req = {
    templateId: editWeightForm.templateId,
    weights: []
  }

  tableData.value.forEach(row => {
    req.weights.push({
      factorId: row.firstId,
      weight: row.firstWeight / 100
    })
    row.secondGroup.forEach(s => {
      req.weights.push({
        factorId: s.secondId,
        weight: s.weight / 100
      })
    })
  })
  const res = await updateTemplateWeightOneById(req)
  if (res.code === 1) {
    ElMessage.success('修改成功')
    editWeightDialogVisible.value = false
  } else {
    ElMessage.error(res.msg || '修改失败')
  }
}


/*
  查看模板章节列表
 */
const chapterDialogVisible = ref(false)  // 弹窗可见状态
const chapterForm = ref({
  templateId: null,
  templateName: '',
  majorName: '',
  typeName: '',
  chapters: []
})

// 点击按钮，打开弹窗并获取模板数据
const openChapterListDialog = async (row) => {
  const res = await getTemplateChapterById({ templateId: row.templateId })
  if(res.code === 1 && res.data) {
    chapterForm.value = res.data
    chapterDialogVisible.value = true
  } else {
    ElMessage.error(res.msg || '获取模板章节列表失败')
  }
}
</script>

<style scoped>
/* 整体容器 */
.container {
  padding: 30px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(58, 194, 159, 0.1);
  margin: 20px;
}

/* 表头区域 */
.clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 0 10px;
}

.clearfix h3 {
  color: rgb(48, 49, 51);
  font-size: 24px;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(58, 194, 159, 0.2);
  position: relative;
  padding-left: 20px;
}

.clearfix h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  background: linear-gradient(180deg, #3ac29f 0%, #3a7bd5 100%);
  border-radius: 2px;
}

/* 添加按钮 */
.float-right {
  background: linear-gradient(135deg, #3ac29f 0%, #3a7bd5 100%);
  border: none;
  border-radius: 12px;
  padding: 18px 20px !important;
  color: white !important;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.float-right:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(58, 194, 159, 0.3);
}

/* 表格样式 */
.table {
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid #ebeef5;
}

:deep(.el-table__header) {
  background: linear-gradient(135deg, #f8ffff 0%, #f3f9ff 100%);
}

:deep(.el-table__header th) {
  background: transparent;
  color: rgba(0, 0, 0, 0.44);
  font-weight: 600;
}

:deep(.el-table__row) {
  transition: all 0.3s ease;
  color: rgba(0, 0, 0, 0.75);
}

:deep(.el-table__row:hover) {
  transform: translateX(5px);
  box-shadow: 4px 0 8px rgba(58, 194, 159, 0.1);
}

.search-form {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: space-between; /* 子元素之间的间隔均匀分布 */
  flex-wrap: wrap; /* 如果子元素太多超出屏幕宽度，可以换行 */
}

.search-form .el-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.search-form .el-form-item {
  margin-right: 20px; /* 每个表单项之间的间距 */
  align-items: center; /* 垂直居中对齐 */
}

.search-form .el-form-item:last-child {
  margin-right: 0; /* 最后一个表单项不需要右边距 */
}

/* 操作按钮 */
.cell {
  display: flex;
  gap: 12px;
}

.el-button {
  border: none;
  border-radius: 8px;
  padding: 8px 15px;
  transition: all 0.3s ease;
}

.el-button:first-child {
  background: linear-gradient(135deg, #3ac29f30 0%, #3a7bd530 100%);
  color: #3a7bd5;
}
/*
.el-button:last-child {
  background: linear-gradient(135deg, #ff6b6b30 0%, #ff475730 100%);
  color: #ff4757;
}
*/
.el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.el-button i {
  margin-right: 6px;
}

/* 隔行颜色 */
:deep(.el-table__row--striped) {
  background: #f8fafc;
}
/* 弹窗 */
.dialog-edit {
  border-radius: 20px;
  overflow: hidden;
}
/* 调整按钮间距 */
.cell {
  gap: 8px !important;
}

:deep(.el-dialog__header) {
  background: linear-gradient(135deg, #f8ffff 0%, #f3f9ff 100%);
  margin-right: 0;
  padding: 20px 30px;
  border-bottom: 1px solid #e8f4ff;
}

:deep(.el-dialog__title) {
  color: #3a7bd5;
  font-size: 20px;
  font-weight: 600;
  position: relative;
  padding-left: 18px;
}

:deep(.el-dialog__title::before) {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  background: linear-gradient(180deg, #3ac29f 0%, #3a7bd5 100%);
  border-radius: 2px;
}

:deep(.el-dialog__body) {
  padding: 30px 40px;
}


.analyse-dialog-content {
  max-height: 60vh;
  overflow-y: auto;
  line-height: 1.8;
  padding: 0 10px;
  white-space: pre-wrap;
}

.form-inline {
  display: grid;
  gap: 25px;
  grid-template-columns: repeat(2, 1fr);
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

:deep(.el-input__wrapper) {
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 2px 6px rgba(58, 194, 159, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 4px 12px rgba(58, 194, 159, 0.2);
  transform: scale(1.02);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  padding: 20px 30px;
  border-top: 1px solid #e8f4ff;
}

.footer-button {
  background: linear-gradient(135deg, #3ac29f 0%, #3a7bd5 100%);
  border: none;
  border-radius: 12px;
  color: white !important;
  padding: 12px 28px;
  transition: all 0.3s ease;
}

.footer-button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(58, 194, 159, 0.3);
}

:deep(.el-dialog) {
  border-radius: 20px;
}

/* 分页样式 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding: 15px 0;
}
/* 分页动效 */
:deep(.el-pagination.is-background .el-pager li) {
  transition: all 0.3s ease;
}
:deep(.el-pagination.is-background .el-pager li:hover) {
  transform: scale(1.1);
}
:deep(.el-pagination.is-background .el-pager li.active) {
  background: linear-gradient(135deg, #3ac29f 0%, #3a7bd5 100%);
}

.template-info {
  margin-bottom: 10px;
  line-height: 1.8;
}

/* 添加按钮 */
.float-right {
  background: linear-gradient(135deg, #3ac29f 0%, #3a7bd5 100%);
  border: none;
  border-radius: 12px;
  padding: 18px 20px !important;
  color: white !important;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.float-right:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(58, 194, 159, 0.3);
}

@media (max-width: 768px) {
  .container {
    margin: 10px;
    padding: 20px;
  }

  .clearfix {
    flex-direction: column;
    gap: 15px;
  }

  .float-right {
    width: 100%;
  }
  .form-inline {
    grid-template-columns: 1fr;
  }

  :deep(.el-dialog__body) {
    padding: 20px;
  }

  .dialog-footer {
    padding: 15px 20px;
  }

  .pagination {
    justify-content: center;
  }
}
</style>